<template>
  <div class="selection-component">
    <div class="selection-show" @click="fnShowList">
      <span>{{selections[nowIndex].label}}</span>
      <div :class="isShow ? 'open-arrow' : 'close-arrow'"></div>
    </div>
    <div class="selection-list" v-show="isShow">
      <ul>
        <li v-for="(item,index) in selections" @click="fnChooseIndex(index)">{{item.label}}</li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
  import Vue from 'vue'
  import {Component, Prop, Emit} from 'vue-property-decorator'

  //引入组件
  @Component
  export default class Selection extends Vue {
    //选项列表
    @Prop({ type:Array })
    selections

    //控制选项列表显示/隐藏
    isShow : boolean = false

    //选中值
    nowIndex : number = 0


    //methods
    //展示隐藏选项列表
    fnShowList():void{
      this.isShow = !this.isShow
    }

    //返回父组件
    @Emit()
    emitOnChange(val){}

    //选中值
    fnChooseIndex(index: number) {
      this.nowIndex = index
      this.isShow = false
      let chooseVal = this.selections[this.nowIndex]
      this.emitOnChange(chooseVal)
    }
  }
</script>

<style lang="scss" scoped>
  .selection-component {
    position: relative;
    display: inline-block;

    .selection-show {
      border: 1px solid #e3e3e3;
      padding: 0 20px 0 10px;
      display: inline-block;
      position: relative;
      cursor: pointer;
      height: 25px;
      line-height: 25px;
      border-radius: 3px;
      background: #fff;

      .open-arrow {
        display: inline-block;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid #e3e3e3;
        width: 0;
        height: 0;
        margin-top: -1px;
        margin-left: 6px;
        margin-right: -14px;
        vertical-align: middle;
      }

      .close-arrow {
        display: inline-block;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 5px solid #e3e3e3;
        width: 0;
        height: 0;
        margin-top: -1px;
        margin-left: 6px;
        margin-right: -14px;
        vertical-align: middle;
      }
    }

    .selection-list {
      display: inline-block;
      position: absolute;
      left: 0;
      top: 25px;
      width: 100%;
      background: #fff;
      border-top: 1px solid #e3e3e3;
      border-bottom: 1px solid #e3e3e3;
      z-index: 5;

      li {
        padding: 5px 15px 5px 10px;
        border-left: 1px solid #e3e3e3;
        border-right: 1px solid #e3e3e3;
        cursor: pointer;
        background: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

      }
      li:hover {
        background: #e3e3e3;
      }
    }
  }
</style>
